<template>
	<view class="captcha-dialog" v-if="visible" @touchmove.stop.prevent>
		<view class="dialog-mask" @click="closeDialog"></view>
		<view class="dialog-content">
			<view class="dialog-header">
				<text class="dialog-title">安全验证</text>
				<view class="close-btn" @click="closeDialog">×</view>
			</view>
			
			<view class="dialog-body">
				<text class="dialog-desc">为了您的账户安全，请完成以下验证</text>
				
				<!-- 图片验证码 -->
				<view class="captcha-section">
					<view class="captcha-wrapper">
						<view 
							class="captcha-display" 
							@click="refreshCaptcha"
						>
							<text class="captcha-text">{{ captchaText }}</text>
						</view>
                        <view class="captcha-input-wrapper">
                            <input 
                                class="captcha-input" 
                                placeholder="请输入验证码" 
                                v-model="captchaCode"
                                maxlength="4"
                                @input="handleCaptchaInput"
                            />
                        </view>
					</view>
				</view>
				
				<text class="captcha-tip">点击图片可刷新验证码</text>
			</view>
			
			<view class="dialog-footer">
				<button class="cancel-btn" @click="closeDialog">取消</button>
				<button 
					class="confirm-btn" 
					:class="{ 'disabled': !captchaCode || captchaCode.length < 4 }"
					:disabled="!captchaCode || captchaCode.length < 4"
					@click="confirmCaptcha"
				>
					确认
				</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'CaptchaDialog',
	props: {
		visible: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			captchaCode: '',
			captchaText: '',
			captchaKey: '',
			correctCaptcha: ''
		}
	},
	watch: {
		visible(newVal) {
			if (newVal) {
				this.generateCaptcha()
			} else {
				this.captchaCode = ''
			}
		}
	},
	methods: {
		// 生成验证码图片
		generateCaptcha() {
			// 生成随机验证码
			const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
			let captchaText = ''
			for (let i = 0; i < 4; i++) {
				captchaText += chars.charAt(Math.floor(Math.random() * chars.length))
			}
			
			// 生成唯一key
			this.captchaKey = Date.now().toString()
			
			// 创建canvas生成验证码图片
			this.createCaptchaImage(captchaText)
		},
		
		// 创建验证码图片
		createCaptchaImage(text) {
			// 由于uni-app的canvas限制，这里使用简化的方式
			// 实际项目中建议调用后端接口获取验证码图片
			
			// 保存正确答案（实际项目中应该保存在服务端）
			this.correctCaptcha = text
			
			// 生成样式化的验证码显示
			this.captchaText = text
		},
		
		// 刷新验证码
		refreshCaptcha() {
			this.captchaCode = ''
			this.generateCaptcha()
		},
		
		// 处理验证码输入
		handleCaptchaInput(e) {
			this.captchaCode = e.detail.value.toUpperCase()
		},
		
		// 确认验证码
		confirmCaptcha() {
			if (!this.captchaCode || this.captchaCode.length < 4) {
				return
			}
			
			// 验证验证码是否正确
			if (this.captchaCode === this.correctCaptcha) {
				this.$emit('success', {
					code: this.captchaCode,
					key: this.captchaKey
				})
				this.closeDialog()
			} else {
				uni.showToast({
					title: '验证码错误',
					icon: 'none'
				})
				this.refreshCaptcha()
			}
		},
		
		// 关闭弹窗
		closeDialog() {
			this.$emit('close')
		}
	}
}
</script>

<style scoped>
.captcha-dialog {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dialog-mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
}

.dialog-content {
	background: #ffffff;
	width: 600rpx;
	border-radius: 20rpx;
	overflow: hidden;
	z-index: 10000;
}

.dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 40rpx 40rpx 0;
}

.dialog-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
}

.close-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40rpx;
	color: #999;
	cursor: pointer;
}

.dialog-body {
	padding: 40rpx;
}

.dialog-desc {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 40rpx;
	display: block;
}

.captcha-section {
	margin-bottom: 20rpx;
}

.captcha-wrapper {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
	position: relative;
}

.captcha-display {
	width: 240rpx;
	height: 80rpx;
	border: 2rpx solid #ddd;
	border-radius: 8rpx;
	background: linear-gradient(135deg, #667eea, #764ba2);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.captcha-display::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 10rpx,
		rgba(255,255,255,0.1) 10rpx,
		rgba(255,255,255,0.1) 20rpx
	);
}

.captcha-text {
	font-size: 36rpx;
	font-weight: bold;
	color: #ffffff;
	letter-spacing: 8rpx;
	text-shadow: 2rpx 2rpx 4rpx rgba(0,0,0,0.3);
	z-index: 1;
	position: relative;
}

.refresh-icon {
	font-size: 32rpx;
}

.captcha-input-wrapper {
	width: 100%;
}

.captcha-input {
	width: 100%;
	height: 80rpx;
	border: 2rpx solid #ddd;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 32rpx;
	background: #fff;
}

.captcha-tip {
	font-size: 24rpx;
	color: #999;
	display: block;
}

.dialog-footer {
	display: flex;
	border-top: 2rpx solid #f0f0f0;
}

.cancel-btn,
.confirm-btn {
	flex: 1;
	height: 100rpx;
	border: none;
	font-size: 32rpx;
	background: #fff;
	cursor: pointer;
}

.cancel-btn {
	color: #666;
	border-right: 2rpx solid #f0f0f0;
}

.confirm-btn {
	color: #007aff;
	font-weight: 600;
}

.confirm-btn.disabled {
	color: #ccc;
}
</style> 